<template>
	<div class="index" >
    <div class="flexcc" style="height: 100vh;">
      <div>
        <div class="flexcc"><img src="../../../static/img/logo.png" style="width: 200px;"></div>
        <el-tabs v-model="regtype" @tab-click="handleClick" style="width: 400px;">
            <el-tab-pane label="密码登录" name="psw">

              <el-select v-model="all.cardtype"  style="margin-bottom: 20px; width: 100%;" placeholder="请选择证件类型">
                  <el-option label="身份证" value="身份证"></el-option>
                  <el-option label="护照" value="护照"></el-option>
              </el-select>
              <div style="margin-bottom: 20px;"><el-input v-model="all.cardid" placeholder="请输入证件号码"></el-input></div>

              <div style="margin-bottom: 20px;"><el-input placeholder="请输入密码" v-model="all.psw" show-password></el-input></div>


              <div style="margin-bottom: 20px;" class="flexcc"><el-button type="primary" @click="zhuce">登录</el-button></div>

              <div class="flexbc">
                <div style="cursor: pointer;">还没账号，<span style="color: #409EFF;" @click="qu(1)">去注册</span></div>
                <div style="cursor: pointer;"><span style="color: #409EFF;" @click="qu2(1)">找回密码</span></div>
                <div style="cursor: pointer;"><span style="color: #409EFF;" @click="qu3(1)">重置密码</span></div>
              </div>

            </el-tab-pane>

            <el-tab-pane label="手机号登录" name="phone">

              <div style="margin-bottom: 20px;"><el-input v-model="all.phone" placeholder="请输入手机号"></el-input></div>
              <div style="margin-bottom: 20px; position: relative;" class="t_input_box">
              	<el-input class="t_del_com_input" v-model="all.phonecode" maxlength="6" placeholder="请输入验证码"></el-input>
              	<div @click="getcode" class="t_get_code">{{ codemsg }}</div>
              </div>

              <el-select v-model="all.cardtype"  style="margin-bottom: 20px; width: 100%;" placeholder="请选择证件类型">
                  <el-option label="身份证" value="身份证"></el-option>
                  <el-option label="护照" value="护照"></el-option>
              </el-select>
              <div style="margin-bottom: 20px;"><el-input v-model="all.cardid" placeholder="请输入证件号码"></el-input></div>

              <div style="margin-bottom: 20px;" class="flexcc"><el-button type="primary" @click="zhuce">登录</el-button></div>
              <div class="flexbc">
                <div style="cursor: pointer;">还没账号，<span style="color: #409EFF;" @click="qu(1)">去注册</span></div>
                <div style="cursor: pointer;">忘记密码，<span style="color: #409EFF;" @click="qu2(1)">找回密码</span></div>
                <div style="cursor: pointer;"><span style="color: #409EFF;" @click="qu3(1)">重置密码</span></div>
              </div>


            </el-tab-pane>
        </el-tabs>
      </div>
    </div>
	</div>
</template>

<script>
  import md5 from 'js-md5';
	export default {
		name: 'index',
		data() {
			return {
        regtype:"psw",
        //注册
        all:{
          logtype:"",   //只能填psw（密码登录）/phone  （手机验证码登录）
          cardid:"",
          cardtype:"",
          phone:"",
          phonecode:"",
          psw:"",
        },
        codemsg:'获取验证码',
        time:""
			}
		},
		created() {


		},
		mounted() {

		},
		methods: {
      zhuce:function(){
        let obj = {
          logtype:this.regtype,
          cardid:this.all.cardid,
          cardtype:this.all.cardtype,
          phone:this.all.phone,
          phonecode:this.all.phonecode,
          psw:md5(this.all.psw).toUpperCase()
        }
        axios.post(this.IP_URL+'/user/login',obj).then((response)=>{
          if(response.data.errorcode == 0){
            localStorage.setItem('osd_person',JSON.stringify(response.data.info))
            this.$router.push('/index')
          } else {
            this.$message.error(response.data.reason);
          }
        })
      },
      qu3:function(){
        this.$router.push('/chongzhimima')
      },
      qu2:function(){
        this.$router.push('/zhaohuimima')
      },
      qu:function(){
        this.$router.push('/zhuce')
      },
      handleClick:function(){
        this.all = {
          regtype:'',
          cardid:"",
          cardtype:"",
          phone:"",
          phonecode:"",
          email:"",
          psw:"",
          psw2:""
        }
      },
      getcode(){

      	if(this.all.phone.length != 11){
      		this.$message.error('请输入正确手机号');
      		return
      	}
      	if(this.codemsg == '获取验证码'){
      		this.codemsg = 60
      		this.time = setInterval(()=>{
      			if(this.codemsg > 0){
      				this.codemsg--
      			}else{
      				this.codemsg = '获取验证码'
      				clearInterval(this.time)
      			}
      		},1000)

      		axios.post(this.IP_URL+'/codeget',{phonenum:this.all.phone}).then((response)=>{
      		  if(response.data.errorcode == 0){
      		    this.$message({
      		      message: '验证码已发送',
      		      type: 'success'
      		    });
      		  } else {
      		    this.$message.error(response.data.reason);
      		  }
      		})


      	}

      },
    }
	}
</script>


<style scoped >
  .t_get_code{
  	width: 112px;
  	height: 32px;
  	background: #e6efff;
  	border: 1px solid #005aff;
  	border-radius: 25px;
  	text-align: center;
  	line-height: 32px;
  	color: #005AFF;
  	font-size: 14px;
  	cursor: pointer;
    position: absolute; right: 4px; top: 4px;
  }
</style>
